<template>
    <div>
       <BreadCrumb></BreadCrumb> 
       <el-card class="box-card up-card" >
           <!-- el-table 的 data 属性是整个表格的数据数组 -->
           <el-table
            :data="list"
            style="width: 100%"
            :highlight-current-row="true"
            fit
            max-height="400px"
            v-loading="loading"
            >
                <!-- label 属性代表当前列列表头 -->
                <!-- prop 属性是当前列应该渲染的字段名 -->
                <el-table-column
                    prop="cover[0].url"
                    label="文章缩略图"
                    show-overflow-tooltip
                    align="center"
                    >
                    <!-- 如果有自定义的内容, 那么就在这个组件开闭标签之间添加 template 模板标签 -->
                    <!-- 在这个地方, 我们是没有拿到当前遍历数据的, 以前的 index , item 都不存在 -->
                    <!-- 现在要从子组件内部将数据接收回来, 作用域插槽 给 template 一个 slot-scope 属性 
                    一般约定俗成 scope-->
                    <template slot-scope="scope">
                        <!-- 这个 scope 就可以接收子组件穿回来的数据
                        饿了么规定, 当前遍历到的那一行, 相当于我们以前的 item 放在 scope.row
                        当前遍历到的索引, 相当于我们以前的 index 放在 scope.$index -->
                        <img v-if="scope.row.cover[0].url" :src="scope.row.cover[0].url | fixImgUrl" alt="" class="img"/>
                        <img v-else :src="scope.row.cover[0].url | fixImgUrl" alt="" class="img"/>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="title"
                    label="文章标题"
                    align="center"
                    >
                </el-table-column>
                <el-table-column
                    prop="type"
                    label="文章类型"
                    align="center"
                    >
                    <template slot-scope="scope">
                       <el-tag v-if="scope.row.type == 1" type="info">文章</el-tag>
                       <el-tag v-else-if="scope.row.type == 2" type="warning">视频</el-tag>
                       <el-tag v-else type="danger">未知</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="create_date"
                    label="创建时间" 
                    show-overflow-tooltip
                    align="center"
                    >
                    <template slot-scope="scope">
                        {{scope.row.create_date ? scope.row.create_date.split('T')[0] + ' ' + scope.row.create_date.split('T')[1].substr(0,scope.row.create_date.split('T')[1].lastIndexOf(':')): ''}}
                    </template>
                </el-table-column>
                <el-table-column
                    prop=""
                    label="操作"
                    align="center"
                    >
                    <template slot-scope="scope">
                         <i class="el-icon-edit icon edit" @click="$router.push('/editArtical?id='+scope.row.id)"></i>
                         <i class="el-icon-delete icon del"></i>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
            class="ep"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                :page-sizes="[1,2,3,4,5]"
                :current-page="pageIndex"
                :page-size="pageSize"
                @current-change="currentChange"
                @size-change="handleSizeChange"
                >
            </el-pagination>
       </el-card>
    </div>
</template>

<script>
import BreadCrumb from '../../components/BreadCrumb'
export default {
    data(){
        return{
           list:[],
           pageIndex:1,
           pageSize:4,
           total:0,
           loading:false
        }
    },
    components:{
        BreadCrumb
    },
    methods:{
        loadList(){
            this.loading = true;
            this.$axios({
                url:'/post',
                params:{
                   pageIndex:this.pageIndex,
                   pageSize:this.pageSize
                }
            }).then(res => {
                this.loading = false;
                this.total = res.data.total;
                this.list = res.data.data;
            })
        },
        currentChange(index){
            // 每当分页组件切换页面的时候, 就会触发
            // 本来分页组件啥都不会做, 只会把切换的页码给哦们传进来
            // 我们就需要手动加载响应页面的数据即可
            this.pageIndex = index;
            this.loadList();
        },
        handleSizeChange(pageSize){
            // 这里是分页组件选择了每页条数之后触发的时间函数
            // 分页组件本身啥都不干, 只是将每页条数传给你
            // 手动获取对应数据即可
            this.pageSize = pageSize;
            this.loadList();
        }
    },
    mounted(){
        this.loadList();
    }
}
</script>

<style lang="less" scoped>
.img{
    width:100px;
    object-fit: cover;
}
.up-card{
    height:50%;
}
.ep{
    margin-top: 20px;
    text-align: center;
}
.icon{
    font-size: 18px;
    padding:10px;
    border-radius: 50%;
    color: #fff;
}
.edit{
   background-color: #E6A23C;
   margin-right: 8px;
}
.del{
    margin-left: 8px;
   background-color: #F56C6C;
}
</style>